﻿<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>数据大屏</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/comon0.css">
  </head>
  <script>
    const url = 'http://192.168.0.103:6002'
    $(window).load(function () {
      $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 20 })
      $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({ fontSize: whei / 20 })
      });
    });

    $(document).ready(function () {
      $.ajax({
        url: url + '/api/index/statistic/v1', // 替换为你的接口URL
        type: 'POST', // 或者 'POST'，取决于接口要求
        success: function (data) {
          // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
          console.log(data)
          document.getElementById('number1').innerText = data.response.userNum
          document.getElementById('number2').innerText = data.response.courseNum
          document.getElementById('number3').innerText = data.response.questionNum
          document.getElementById('number4').innerText = data.response.trainNum
        },
        error: function (xhr, status, error) {
          // 处理错误情况
          console.error("An error occurred: " + status + "\nError: " + error);
        }
      });
    });
  </script>
  <script type="text/javascript" src="/js/echarts.min.js"></script>
  <script language="JavaScript" src="/js/js.js"></script>

  <body>
    <div class="canvas" style="opacity: 0">
      <iframe frameborder="0" src="/js/index.html" style="width: 100%; height: 100%"></iframe>
    </div>
    <div class="loading">
      <div class="loadbox"> <img src="/picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height:3rem">
            <div class="alltitle">登录人数</div>
            <div class="allnav" id="echart4"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem">
            <div class="alltitle">培训次数</div>
            <div class="allnav" id="echart2"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter" id="number1"></li>
                <li class="pulll_left counter" id="number2"></li>
                <li class="pulll_left counter" id="number3"></li>
                <li class="pulll_left counter" id="number4"></li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">用户总量 </li>
                <li class="pulll_left">课程总量</li>
                <li class="pulll_left">题目总量</li>
                <li class="pulll_left">培训次数</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1"><img src="/picture/lbx.png"></div>
            <div class="map2"><img src="/picture/jt.png"></div>
            <div class="map3"><img src="/picture/map.png"></div>
            <div class="map4" id="map_1"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 3rem">
            <div class="alltitle">热门课程</div>
            <div class="allnav" id="echart1"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem">
            <div style="height:100%; width: 100%;">
              <div class="sy" id="fb1"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back">
      <div class="boxall" style="height: 3.4rem">
        <div class="alltitle">培训分析</div>
        <div class="allnav" id="echart5"></div>
        <div class="boxfoot"></div>
      </div>
    </div>


    <script type="text/javascript" src="/js/china.js"></script>
    <script type="text/javascript" src="/js/area_echarts.js"></script>
  </body>

</html>
